<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .score-case {
            width: 1000px;
            margin: 50px auto;
            display: flex;
        }

        .score-case .table {
            flex: 4;
        }

        .score-case .table table {
            width: 100%;
            border-spacing: 0;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        .score-case .table table th {
            background: #f5f5f5;
        }

        .score-case .table table tr:hover td {
            background: #f5f5f5;
        }

        .score-case .table table td,
        .score-case .table table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: center;
            padding: 10px;
        }

        .score-case .table table td.red,
        .score-case .table table th.red {
            color: red;
        }

        .score-case .table .none {
            height: 100px;
            line-height: 100px;
            color: #999;
        }

        .score-case .form {
            flex: 1;
            padding: 20px;
        }

        .score-case .form .form-item {
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }

        .score-case .form .form-item .label {
            width: 60px;
            text-align: right;
            font-size: 14px;
        }

        .score-case .form .form-item .input {
            flex: 1;
        }

        .score-case .form .form-item input,
        .score-case .form .form-item select {
            appearance: none;
            outline: none;
            border: 1px solid #ccc;
            width: 200px;
            height: 40px;
            box-sizing: border-box;
            padding: 10px;
            color: #666;
        }

        .score-case .form .form-item input::placeholder {
            color: #666;
        }

        .score-case .form .form-item .cancel,
        .score-case .form .form-item .submit {
            appearance: none;
            outline: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 4px 10px;
            margin-right: 10px;
            font-size: 12px;
            background: #ccc;
        }

        .score-case .form .form-item .submit {
            border-color: #069;
            background: #069;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="score-case">
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <th><input v-model="checkAll" type="checkbox"></th>
                            <th>编号</th>
                            <th>科目</th>
                            <th>成绩</th>
                            <th>考试时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <!-- <tbody v-if="list.length > 0"> -->
                    <!-- 优化 -->
                    <!-- 如果数组长度大于0，那一定都是true，如果数组长度为0那就是false -->
                    <tbody v-if="list.length">
                        <tr v-for="(item, index) in list">
                            <td><input v-model="item.isSelect" type="checkbox"></td>
                            <td>{{ index + 1 }}</td>
                            <td>{{ item.subject }}</td>
                            <td :class="{red: item.score < 60}">{{ item.score }}</td>
                            <!-- 表达式就是一定产生结果就叫表达式 -->
                            <!-- 语句没有结果，只是用来做程序的功能 -->
                            <td>{{ formatTime(item.date) }}</td>
                            <td><a @click.prevent="del(item.id)" href="#">删除</a></td>
                        </tr>
                    </tbody>

                    <tbody v-else>
                        <tr>
                            <td colspan="6">
                                <span class="none">暂无数据</span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="6">
                                <span>总分：{{ total }}</span>
                                <span style="margin-left:50px">平均分：{{ avgScore }}</span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="form">
                <div class="form-item">
                    <div class="label">科目：</div>
                    <div class="input">
                        <input type="text" v-model.trim="subject" placeholder="请输入科目" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">分数：</div>
                    <div class="input">
                        <input type="text" v-model.trim.number="score" placeholder="请输入分数" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label"></div>
                    <div class="input">
                        <button @click="add" class="submit">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./vue.js"></script>
    <!-- 导入dayjs -->
    <script src="./dayjs.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // 保存数据的数组
                    // 我们没法保证本地存储里一定有数据，如果没数据取到了null了
                    // 为了保证没数据，list也不是null，而是空数组，所以写一个||
                    list: JSON.parse(localStorage.getItem('scores')) || [],
                    // 学科
                    subject: '',
                    // 成绩
                    score: ''
                }
            },
  
            methods: {
                // 删除
                del(id) {

                    // 找到这个id对应的数据，把他从数组中移除掉
                    // 例如id是32，就把id为32的从数组中拿掉
                    // 删掉数组中的元素，相当于就是过滤出来其他元素
                    // 例如要删的id是32，我就过滤出一个新数组，新数组里不包含id为32的数据即可
                    // this.list = this.list.filter(v => v.id != id)

                    // 删掉某个元素就是过滤出所有id不等于被删元素的id的每一项
                    // this.list = this.list.filter(v => {
                    //     // v就是每一项
                    //     if (v.id != id) {
                    //         // 代表我这个id并不是要删的id，所以return true过滤到新数组
                    //         return true
                    //     }else {
                    //         return false
                    //     }
                    // })

                    this.list = this.list.filter(v => v.id != id)
                },

                // 添加触发的事件
                add() {

                    // 非空判断
                    if (this.subject == '' || this.score == '' ) return alert('请输入完整的内容')

                    // 把输入的内容加到数组里
                    this.list.push({
                        // 时间戳作为id，因为时间戳绝对不重复
                        id: Date.now(),
                        subject: this.subject,
                        score: this.score,
                        // 当前加的，就用当前时间
                        date: new Date(),
                        // 这代表有没有选中，而新数据肯定没有选中所以直接给false
                        isSelect: false
                    })

                    // 加完数据后把输入的内容清空
                    this.subject = this.score = ''
                },

                // 处理日期的方法
                formatTime (date) {

                    return dayjs(date).format('YYYY-MM-DD')
                }
            },

            // 写计算属性的地方
            computed: {
                // 总分
                total () {
                    // 要遍历数组，把数组中每一项的score取出来，进行累加得到总分
                    return this.list.reduce( (sum, v) => sum += v.score, 0)
                },

                // 平均分
                avgScore () {
                    // 如果删完了，数组长度为0
                    if (this.list.length == 0) return 0
                    // 总分 / 数量
                    const avg = this.total / this.list.length
                    // 返回保留2位小数的结果
                    return avg.toFixed(2)
                },

                // 全选做绑定的计算属性
                checkAll: {
                    get () {
                        // 依赖了数组产生
                        return this.list.every( v => v.isSelect )
                    },

                    set (val) {
                        this.list.forEach(v => v.isSelect = val)
                    }
                }
            },
            
            // 写侦听器的地方
            watch: {
                // 侦听数组的变化
                list () {
                   
                    // 数组有变化，立即把数组最新的结果存到本地存储
                    localStorage.setItem('scores', JSON.stringify(this.list) )
                }
            }
        })
    </script>
</body>

</html>